<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>激光导航巡检地图绘制DEMO</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css"/>
</head>
<body>
	<!--canvas#MapCanvas[width="1900" height="950"]{您的浏览器不支持Canvas标签}-->
	<div id="HtmlTags"></div>
	<canvas id="MapCanvas" width="1905" height="960">您的浏览器不支持Canvas标签</canvas>
	<div id="HtmlTags1"></div>
	<script type="text/javascript">
		//获取画布标签ID
		var MapTag = document.getElementById("MapCanvas");
		
		//页面加载完加载背景图片方法
		function loadBgImg(){
			//定义背景图片对象
			var imgPath = "../img/timg.jpg";
			var imgObj = new Image();
			imgObj.src= imgPath;
			
			imgObj.onload = function(){
				var cxt = MapTag.getContext("2d");
				cxt.drawImage(this,0,0,1905,960);
			};
			//console.log(imgObj);
		}
		
		//绘制巡检点圆形标志方法 - 圆形
		function drawTaskPoint(Xais,Yais){
			//构建绘制圆形的基本变量(半径、圆心的X坐标、圆心的Y坐标)
			var radius = 12;
			var xais = Xais;
			var yais = Yais;
			
			var arcxt = MapTag.getContext("2d");
			
			arcxt.fillStyle = "#FF0101";
			
			//开始路径
			arcxt.beginPath();
			arcxt.arc(xais,yais,radius,0,2*Math.PI);
			arcxt.stroke();
			arcxt.fill();
			arcxt.closePath();
		}
		
		//绘制巡检点图形标志方法 - 自定义图形
		function drawTaskImgPoint(Xais,Yais){
			var cxt = MapTag.getContext("2d");
			var imgIco = new Image();
			imgIco.src = "../img/mapico.png";
			cxt.drawImage(imgIco,Xais,Yais,32,32);
		}
		
		//绘制巡检点HTML标签标志方法 - 自定义HTML标签
		function drawTaskHtmlTag(Xais,Yais){
			var HtmlTag = document.getElementById("HtmlTags");
			//设置div的css样式
			HtmlTag.style.cssText = "position:absolute; top:" + parseInt(Yais) + "px; left:" + parseInt(Xais) + "px;";

			var HtmlTxt = "";
			
			HtmlTxt += "<div class='pulse'></div>";
			HtmlTxt += "<div class='pin'></div>";
			
			console.log(HtmlTxt);
			
			HtmlTag.innerHTML = HtmlTxt;
		}
		
		//
		function drawTaskHtmlTag1(Xais,Yais){
			var HtmlTag = document.getElementById("HtmlTags1");
			//设置div的css样式
			HtmlTag.style.cssText = "position:absolute; top:" + parseInt(Yais) + "px; left:" + parseInt(Xais) + "px;";

			var HtmlTxt = "";
			HtmlTxt += "<div class='region-list waite postition-4 waite-node'>";
			HtmlTxt += "<div class='area-box'><span class='dot'></span><span class='pulse delay-01'></span><span class='pulse delay-02'></span></div>";
			HtmlTxt += "<div class='show-regin'><span>陕西</span></div>";
			HtmlTxt += "</div>";
			console.log(HtmlTxt);
			
			HtmlTag.innerHTML = HtmlTxt;
		}

		//绘制巡检任务路线地图
		function drawTaskLine(Xais,Yais){
			var cxt = MapTag.getContext("2d");
			
			//定义绘制路线的宽度和颜色
			cxt.lineWidth = 10;
			cxt.strokeStyle = "#D58512";
			
			cxt.beginPath();
			cxt.lineCap = "round";
			cxt.moveTo(Xais,Yais);
			cxt.lineTo(Xais,Yais + 127);
			cxt.lineTo(Xais - 160,Yais + 127);
			cxt.moveTo(Xais,Yais + 127);
			cxt.lineTo(Xais,Yais + 200);
			cxt.lineTo(Xais - 160,Yais + 200);
			cxt.lineTo(Xais - 160,Yais + 330);
			cxt.lineTo(Xais,Yais + 330);
			
			console.log(Xais);
			console.log(Yais - 650);
			console.log("==========================");
			//开始画弧
			//cxt.beginPath();
			cxt.arc(Xais + 150, Yais + 330, 150,Math.PI, 0.2*Math.PI, true);
			cxt.stroke();
			//cxt.moveTo();
			cxt.stroke();
			//cxt.closePath();
		}
	
		//清除画布的方法
		function CleardrawCircle(){

		}
		
		//调用加载背景图片方法
		loadBgImg();
		setInterval(function(){
			drawTaskLine(424,250);
			drawTaskPoint(424,250);
			drawTaskPoint(424,450);
			drawTaskImgPoint(320,350);
		},10);
		
		setInterval(function(){
			drawTaskHtmlTag(350,550);
		},1500);
//		drawTaskHtmlTag1(910,30);
		
	</script>
	<!--https://blog.csdn.net/yhflyl/article/details/83783425-->
	<!--https://www.cnblogs.com/luyuan/p/3831940.html-->
	<!--https://wow.techbrood.com/fiddle/16591    SVG实例演示-->
	<!--https://www.cnblogs.com/padding1015/p/9717845.html-->
	
	<!--http://www.51qianduan.com/article/3709.html-->
	
	<!--https://blog.csdn.net/weixin_34166472/article/details/88728269       canvas进阶——如何画出平滑的曲线?-->
</body>
</html>